<!--
 * @Author: 刘十三
 * @Date: 2023-12-29 16:56:03
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-02-02 18:40:05
 * @FilePath: \NM-dev-1.3.1\dev\pages\internal\linkage\components\retailerItem.vue
 * @Description: 内蒙多员联动 - 信息录入（选择零售许可证号列表组件）
-->

<template>
  <view>
    <u-row gutter="16" style="width:100%">
      <u-col span="1">
        <view class="title title-space">
          <u-icon size="30" name="/static/check/licence.png" v-if="client.licNo"></u-icon>
          <u-icon size="30" name="/static/check/nolicence.png" v-else></u-icon>
        </view>
      </u-col>
      <u-col span="11">
        <view class="title u-p-l-15 u-p-b-10">
          {{ client.companyName }}
        </view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">地址：{{ client.businessAddr || "" }}</view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">许可证号：{{ client.licNo || "" }}</view>
      </u-col>
      <u-col span="12">
        <view class="sub-title address">运营状态：{{ client.licStatusName || "" }}</view>
      </u-col>
      <u-col span="12">
        <u-row class="sub-title u-p-l-5">
          <u-col span="5" style="display: flex">
            <u-icon :label="client.managerName" size="30" name="/static/check/manager.png"></u-icon>
          </u-col>
          <u-col span="7" style="display: flex">
            <u-icon :label="`电话：${client.retailTel}`" size="28" name="phone-fill" @click.native="handlerShowPhone"></u-icon>
          </u-col>
        </u-row>
      </u-col>
    </u-row>
  </view>
</template>
<script>
import checkService from "@/service/check/check.service";
export default {
  name: "ClientItem",
  props: {
    client: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tels: [],
    };
  },
  watch: {
    client: {
      immediate: true,
      handler() {
        this.$forceUpdate();
      },
    },
  },
  methods: {
    // 显示联系电话
    handlerShowPhone(e) {
      this.tels = [];
      if (this.client.retailTel == null || this.client.retailTel == "") {
        this.$modal.alert("当前记录未维护电话");
        return;
      } else {
        this.tels = this.client.retailTel.split(",");
      }

      if (this.tels.length > 0) {
        // 此处不能使用u-action-sheet，在u-swipe-action中使用时样式异常
        uni.showActionSheet({
          itemList: this.tels,
          itemColor: this.$theme.u_type_primary,
          success: ({ tapIndex }) => this.doPhone(this.tels[tapIndex]),
        });
        return;
      }
      e.stopPropagation();
      e.preventDefault();
    },
    // 拨打电话
    doPhone(telStr) {
      let tel = telStr.substring(telStr.indexOf(" "));
      this.$deviceApi.makePhoneCall(tel);
    },
  },
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 15px;
  color: #666;
  font-weight: 600;
}
.title-space {
  margin: 5px 10px;
}
.sub-title {
  color: #666;
  margin: 3px 4px;
}
.address {
  padding-left: 8px;
}
</style>
